<template>
	<view class="container">
		<!-- 表单 -->
		<view class="form_container">
			<u--form :model="taskInfo" ref="taskForm" :rules="rules" :labelStyle="labelStyle">

				<u-form-item prop="description" labelWidth="auto">
					<u--textarea v-model="opinion" placeholder="输出您的观点..." confirmType="done"></u--textarea>
				</u-form-item>

				<u-upload class="form_upload" :previewFullImage="true" :fileList="fileList1" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="6"></u-upload>

			</u--form>

			<u-button text="发表" color="var(--echo-main-color)" @click="doSubmit"></u-button>
		</view>
		<u-datetime-picker :show="startTimeShow" v-model="startTime" mode="date" @confirm="selectStartTime"
			@cancel="startTimeShow = false">
		</u-datetime-picker>
		<u-datetime-picker :show="endTimeShow" v-model="endTime" mode="date" @confirm="selectEndTime"
			@cancel="endTimeShow = false">
		</u-datetime-picker>
	</view>
</template>

<script>
	import {
		publishOpinion
	} from '@/config/opinion.js';

	export default {
		data() {
			return {
				ipfsUrl: '',
				opinion: '',
				fileList1: [],
				// form的样式
				labelStyle: {
					marginRight: '30rpx'
				},
				// 表单数据
				taskInfo: {
					taskName: '',
					incentiveAmount: '',
					description: '',
					// 用户标识
					customerNo: '',
					// 币种
					ccy: 'fc',
					// 任务类型,单人多人
					claimMethod: 0,
					// 任务类型 个人任务
					type: 0,
					startTime: '',
					endTime: ''
				},
				// 控制日期选择框
				startTimeShow: false, // 开始时间
				endTimeShow: false, // 结束时间
				startTime: Number(new Date()),
				endTime: Number(new Date()),
				// 规则
				rules: {
					taskName: [{
						required: true,
						message: "请填写任务名"
					}],
					claimMethod: [{
						required: true,
						message: "请选择任务类型"
					}],
					ccy: [{
						required: true,
						message: "请选择币种"
					}],
					description: [{
						required: false
					}],
				},
			}
		},
		created() {
			this.ipfsUrl = getApp().globalData.ipfsUrl
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let ipfsUploadUrl = this.ipfsUrl;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: ipfsUploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							console.log(res)
							var resJon = JSON.parse(res.data)
							setTimeout(() => {
								resolve(resJon.data.fileUrl)
							}, 1000)
						}
					});
				})
			},
			// 选择开始时间
			selectStartTime(dataTime) {
				this.taskInfo.startTime = uni.$u.timeFormat(dataTime.value, 'yyyy-mm-dd')
				this.startTimeShow = false
			},

			selectEndTime(dataTime) {
				this.taskInfo.endTime = uni.$u.timeFormat(dataTime.value, 'yyyy-mm-dd')
				this.endTimeShow = false
			},

			doSubmit() {
				var customerInfo = uni.getStorageSync('customerInfo');
				console.log(this.opinion)
				console.log(customerInfo.customerNo)
				var imgArr = [];
				for (let i = 0; i < this.fileList1.length; i++) {
					imgArr[i] = this.fileList1[i].url
				}

				publishOpinion({
					mediaType: '1',
					medias: imgArr + "",
					opinion: this.opinion,
					customerNo: customerInfo.customerNo,
					publishAddress: customerInfo.customerNo
				}).then(res => {
					console.log(res)
					if (res) {
						uni.navigateBack()
						// 通知更新列表数据
						uni.$emit('updateMomentList')
					}
				})

				console.log('创建');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		/* 确保没有高度的时候也会100% */
		min-height: 100vh;
		background-color: #F9F9F9;

		.form_container {
			padding: 0 30rpx;
		}
	}

	.u-upload__button {
		height: 200rpx !important;
		width: 200rpx !important;
	}

	.form_upload {
		margin-bottom: 20rpx;
	}
</style>
